<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        border: 1px solid;
        width: 600px;
        height: 400px;
      }
    </style>
    <script src="./assets/echarts/echarts.js"></script>
    <script>
      // 生成固定长度的数值数组数据
      function getData(num = 6) {
        let arr = [];
        for (let i = 0; i < num; i++) {
          arr.push(Math.ceil(Math.random() * 100));
        }
        return arr;
      }
    </script>
  </head>
  <body>
    <div class="box" id="char"></div>
    <script>
      let char = echarts.init(document.querySelector("#char"));
      /** @type EChartsOption */
      char.setOption({
        // xAxis: {
        //   type: "category",
        //   data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        // },
        xAxis: [
          {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
          {
            type: "value",
            name: "数值x轴",
            position: "top",
            axisLine: {
              onZero: false,
            },
          },
        ],
        // yAxis: {
        //   type: "value",
        // },
        yAxis: [
          {
            type: "value",
          },
          {
            type: "value",
            name: "折线坐标",
            position: "right",
            axisLine: {
              onZero: false,
            },
          },
        ],
        tooltip: {},
        legend: {
          data: ["bar1", "bar2", "bar3", "line1", "scatter1", "pie1"],
        },
        series: [
          // 相同规则的图形进行组合，完成的是叠加操作
          // 数据的分类不同，需要提供不同的描述坐标
          {
            name: "bar1",
            data: getData(7),
            type: "bar",
          },
          // 增加数据的系列描述
          {
            name: "bar2",
            type: "bar",
            data: getData(7),
          },
          {
            name: "bar3",
            type: "bar",
            yAxisIndex: 1,
            data: getData(7),
          },
          {
            name: "line1",
            type: "line",
            smooth: true,
            yAxisIndex: 1,
            data: getData(7).map((c) => c * 10),
          },
          {
            name: "scatter1",
            type: "scatter",
            xAxisIndex: 1,
            data: [
              [10, 20],
              [30, 70],
              [40, 90],
              [60, 50],
              [70, 40],
              [90, 20],
            ],
          },
          // 不同类型的图形会直接进行覆盖
          // {
          //   name: "pie1",
          //   type: "pie",
          //   data: [
          //     { name: "item1", value: 200 },
          //     { name: "item2", value: 100 },
          //     { name: "item3", value: 80 },
          //     { name: "item4", value: 130 },
          //   ],
          // },
        ],
      });
    </script>
  </body>
</html>
